﻿
@section css{
    <link href="~/Wap/detail.css" rel="stylesheet" />
}

@section scripts{
    <script type="text/javascript">
        var bootstrap = function ($, ibpm) {
            "use strict";
            var page = {
                init: function () {
                    //初始化
                    page.bind();
                },
                bind: function () {
                    var down = document.getElementById("down");
                    var count = document.getElementById("count");
                    down.onclick = function () {
                        if (count.innerHTML > 1) {
                            count.innerHTML--;
                        } else {
                            count.innerHTML = 1;
                        }
                    }
                    $(".middle .xia li").click(function () {
                        $(this).addClass('cur').siblings().removeClass('cur');
                    });
                }
            };
            page.init();
        };
    </script>
}

<div class="warp warptwo clearfloat">
    <div class="detail clearfloat">
        <!--banner star-->
        <div class="banner swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="/Playground/images/xj3.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="/Playground/images/xj1.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="/Playground/images/xj3.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="/Playground/images/xj1.jpg" alt=""></a></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--banner end-->
        <div class="top clearfloat box-s">
            <div class="shang clearfloat">
                <div class="zuo clearfloat fl over2 box-s">
                    单反相机，彰显你的风格
                </div>
                <div class="you clearfloat fr">
                    <i class="iconfont icon-fenxiang"></i>
                    <p>分享</p>
                </div>
            </div>
            <div class="xia clearfloat">
                <p class="jifen fl box-s"><samp>100000</samp>积分</p>
                <span class="fr">销量8件</span>
            </div>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品详情</span>
                <i class="iconfont icon-jiantou1 fr"></i>
            </a>
        </div>
        <div class="desc">
            <img src="/Playground/images/d01.jpg">
            <img src="/Playground/images/d02.jpg">            
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品评价</span>
                <i class="iconfont icon-jiantou fr"></i>
            </a>
        </div>
        <div class="tips">
            <ul class="am-cf">
                <li class="list"><span>服务热情</span><span class="num">1</span></li>
                <li class="list"><span>环境好</span><span class="num">11</span></li>
                <li class="list"><span>卫生好</span><span class="num">12</span></li>
                <li class="list"><span>味道好极好极好极好极好极好极好极好极好极好极好极了</span><span class="num">31</span></li>
                <li class="list"><span>服务热情</span><span class="num">14</span></li>
                <li class="list"><span>服务热情</span><span class="num">14</span></li>
            </ul>
        </div>
    </div>
</div>

<!--footerone star-->
<div class="footerone clearfloat">
    <div class="left clearfloat fl">
        <ul>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-shangcheng"></i>
                        <p>商城</p>
                    </a>
                </div>
            </li>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-kefu1"></i>
                        <p>客服</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="right clearfloat fl">
        <span class="btn fl" onClick="toshare()">加入购物车</span>
        <a href="/Mall/Confirm" class="btn btnone fl">立即购买</a>
    </div>
</div>
<!--footerone end-->
<!--弹出购物车内容-->
<div class="am-share">
    <div class="am-share-footer">
        <button class="share_btn"><img src="/Playground/images/chahao.png" /></button>
    </div>
    <div class="am-share-sns box-s">
        <div class="sdetail clearfloat">
            <div class="top clearfloat">
                <div class="tu clearfloat fl">
                    <span></span>
                    <img src="/Playground/images/xj2.jpg" />
                </div>
                <div class="you clearfloat fl">
                    <p class="tit">单反相机</p>
                    <span>100000积分</span>
                </div>
            </div>
            <div class="middle clearfloat">
                <p>颜色分类</p>
                <div class="xia clearfloat">
                    <ul>
                        <li class="ra3 cur">蓝色</li>
                        <li class="ra3">白色</li>
                    </ul>
                </div>
            </div>
            <div class="middle clearfloat">
                <p>机身内存</p>
                <div class="xia clearfloat">
                    <ul>
                        <li class="ra3 cur">120G</li>
                        <li class="ra3">60G</li>
                    </ul>
                </div>
            </div>
            <div class="bottom clearfloat">
                <p class="fl">购买数量</p>
                <div class="you clearfloat fr">
                    <ul>
                        <li id="down"><img src="/Playground/images/jian.jpg" /></li>
                        <li id="count">1</li>
                        <li onclick="document.getElementById('count').innerHTML++"><img src="/Playground/images/jia.jpg" /></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <a href="/Mall/Shopcar" class="shop-btn db">确定</a>
</div>